<template>
	<view class="" v-if="isShow">
		<!-- 写入内容 -->
		<view class="matter-window unify-flex unify-fixed uni-from-the-bottom">
			<view class="left unify-flex">
				<view class="left-bag unify-relative" @tap="tapTrolleyShow">
					<view class="iconfont el-icon-gouwu unify-absolute" :class="'bg-' + themeColor.name"></view>

					<!-- 突出数量 -->
					<view id="cart-icon" class="left-bag-highlight unify-absolute" :class="'bg-' + themeColor.name">
						{{num}}</view>
				</view>

				<view class="left-price">
					<text class="money-symbol">{{moneySymbol}}</text>
					{{totalPrice}}
				</view>
			</view>

			<!-- 结算按钮 -->
			<view class="submit-btn" :class="'bg-' + themeColor.name" @tap="tapSubmit(list)">去结算</view>
		</view>

		<!-- 购物车窗口 -->
		<uni-shopping-trolley-window ref="uniShoppingTrolleyWindow" :show="isTrolleyShow"
			:list="list"></uni-shopping-trolley-window>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			cartItemElc: {
				type: Object,
				default () {
					return {
						left: 0,
						top: 0
					}
				}
			},
			num: {
				type: [String, Number],
				default: 0
			},
			totalPrice: {
				type: [String, Number],
				default: 0
			},
			isMinus: {
				type: Number,
				default: 0
			},
			list: {
				type: Array,
				default: null
			}
		},
		data() {
			return {
				moneySymbol: this.$mConstDataConfig.moneySymbol,
				isShow: false,
				isAnimate: true,
				isTrolleyShow: false,

			}
		},
		methods: {
			// 购物车是否显示
			isCartShow() {
				this.isShow = this.show;
				if (this.isMinus !== 1) {
					setTimeout(() => { // 一定要加延迟，不然拿到的坐标为null
						this.getCartKepPosition()
					}, 20)
				}
			},

			// 获取购物车篮子位置
			getCartKepPosition(e) {
				let cartIcon = uni.createSelectorQuery().in(this).select('#cart-icon')
				cartIcon.boundingClientRect(data => {
					this.bezierPos = this.$mUtils.bezier([{
						x: this.cartItemElc.left,
						y: this.cartItemElc.top
					}, {
						x: this.cartItemElc.left - 100,
						y: 120
					}, {
						x: data.left,
						y: data.top
					}], 20)

					this.startAnimation() // 回调动画
				}).exec()
			},

			// 开始动画
			startAnimation() {
				if (this.isAnimate) {
					this.isAnimate = false;
					let bezier_points = this.bezierPos['bezier_points'];
					let index = 0;
					this.$emit('updateIsCartIcon', true)
					clearInterval(this.timer);
					this.timer = setInterval(() => {
						index++;
						this.cartItemElc.left = bezier_points[index]["x"];
						this.cartItemElc.top = bezier_points[index]["y"];
						this.$emit('updateCartItemElc', this.cartItemElc)
						//动画完成
						if (index >= 19) {
							clearInterval(this.timer);
							this.isAnimate = true;
							this.$emit('updateIsCartIcon', false)
						}
					}, 20)
				}
			},

			// 结算
			tapSubmit(e) {
				console.log(e + "99999999")
				if (!this.isStatus) {
					this.$openPage({
						name: 'goodsAffirm',
						query: {
							data: e
						}
					})
				} else {
					this.isModal = true;
					setTimeout(() => {
						this.$refs.uniShowModal.updateShow()
					}, 10)
				}
			},

			// 购物车
			tapTrolleyShow() {
				this.isTrolleyShow = !this.isTrolleyShow;
				setTimeout(() => {
					this.$refs.uniShoppingTrolleyWindow.updateStatus()
				}, 10)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 写入内容
	.matter-window {
		z-index: 98;
		height: 50px;
		width: 90%;
		left: 0;
		right: 0;
		bottom: var(--window-bottom);
		margin: 0 auto 10px;
		border-radius: 25px;
		justify-content: space-between;
		align-items: center;
		background-color: #555555;
	}

	.left {
		align-items: center;
	}

	.left-bag {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #555555;
		margin-left: 25px;
		margin-top: -15px;
		text-align: center;
	}

	.el-icon-gouwu {
		width: 48px;
		height: 48px;
		line-height: 48px;
		// background-color: $uni-essential-colour;
		font-size: 25px;
		color: #FFFFFF;
		border-radius: 50%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.left-bag-highlight {
		right: 0;
		width: 21px;
		height: 21px;
		// background-color: $uni-essential-colour;
		text-align: center;
		line-height: 20px;
		border-radius: 50%;
		border-bottom: 1px solid #FFFFFF;
		border-left: 1px solid #FFFFFF;
		font-size: 12px;
		color: $uni-text-color-inverse;
	}

	.left-price {
		font-size: 18px;
		color: $uni-text-color-inverse;
		margin-left: 5px;
	}

	.left-num {
		font-size: $uni-font-size-base;
		margin-left: 25px;
		color: $uni-text-color-inverse;
	}

	.money-symbol {
		font-size: 14px;
		font-weight: 400;
	}

	.submit-btn {
		width: 180rpx;
		font-size: 14px;
		height: inherit;
		line-height: 50px;
		// background: linear-gradient(to right, $uni-auxiliary-colour3, $uni-essential-colour);
		text-align: center;
		border-radius: 0 25px 25px 0;
		color: $uni-text-color-inverse;
	}
</style>